<!--
 * @Author: your name
 * @Date: 2021-12-14 16:30:26
 * @LastEditTime: 2022-09-16 19:28:58
 * @LastEditors: Yhd you@example.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \starlight_cat\src\components\newAddFrom\Aside\index.vue
-->
<template>
  <div :class="{ 'from-aside': true, iscollapse: collapse }">
    <div class="aside_body">
      <Scrollbar>
        <div
          v-for="({ title, id }, i) in aside"
          :key="i"
          :class="{ 'aside-item': true, isactive: activeAsid == id }"
          @click="toAside(id)"
        >
          <span class="title" :title="title">{{ title }}</span>
          <i v-show="activeAsid == id" class="el-icon-caret-right"></i>
        </div>
      </Scrollbar>
    </div>
    <div class="collapse" @click="collapse = !collapse">
      <i
        :class="collapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"
        :title="collapse ? '展开' : '收起'"
      ></i>
    </div>
  </div>
</template>

<script>
  import { scrollTo } from '@/utils/scrollTo'
  import Scrollbar from '@/components/MyScrollbar'
  export default {
    components: {
      Scrollbar,
    },
    props: {
      aside: {
        // eslint-disable-next-line vue/require-valid-default-prop
        default: [],
        type: Array,
      },
      scrollTarget: {
        default: '',
        type: String,
      },
      asideActive: {
        default: 0,
        type: Number,
      },
    },
    data() {
      return {
        collapse: false,
        asideActived: 0,
      }
    },
    computed: {
      activeAsid: {
        set(val) {
          this.asideActived = this.aside.findIndex((item) => item.id == val)
        },
        get() {
          return this.aside[this.asideActived].id
        },
      },
    },
    watch: {
      asideActive(val) {
        this.asideActived = val
      },
    },
    methods: {
      toAside(id) {
        scrollTo({
          to: id,
          target: this.scrollTarget,
          offset: -10,
          callback: () => {
            // this.activeAsid = id;
          },
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .from-aside {
    position: relative;
    margin-right: 12px;
    &.iscollapse .aside_body {
      width: 0;
      padding-left: 0;
    }
    .aside_body {
      height: 100%;
      // 1px: 1px;
      padding: 26px 0 0 12px;
      width: 152px;
      overflow: hidden;
      border-right: 1px solid #f4f4f4;
      .aside-item {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px 0 24px;
        box-sizing: border-box;

        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4a5568;
        .title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &.isactive,
        &:hover {
          cursor: pointer;
          color: #fff;
          background-color: #3f8cff;
        }
      }
    }
    .collapse {
      position: absolute;
      top: 70px;
      right: -12px;
      width: 12px;
      height: 40px;
      background: #dbeaff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 4px 4px 0;
      i {
        color: #3f8cff;
        font-size: 12px;
      }
      &:hover {
        background: #3f8cff;
        cursor: pointer;
        i {
          color: #fff;
        }
      }
    }
  }
</style>
